<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Server API 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .api-section {
            margin-bottom: 30px;
        }
        .endpoint {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }
        .method {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 3px;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        .get { background-color: #28a745; }
        .post { background-color: #007bff; }
        .put { background-color: #ffc107; color: #000; }
        .delete { background-color: #dc3545; }
        .url {
            font-family: monospace;
            background: #e9ecef;
            padding: 2px 6px;
            border-radius: 3px;
        }
        .test-form {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background: #0056b3;
        }
        .response {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        .success {
            border-left: 4px solid #28a745;
            background: #d4edda;
        }
        .error {
            border-left: 4px solid #dc3545;
            background: #f8d7da;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JSON Server API 测试工具</h1>
        <p>服务器地址: <strong>http://localhost:806</strong></p>
    </div>

    <div class="container">
        <div class="api-section">
            <h2>用户登录测试</h2>
            <div class="endpoint">
                <span class="method get">GET</span>
                <span class="url">/users?username={username}&password={password}</span>
            </div>
            <div class="test-form">
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" id="loginUsername" value="admin" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <label>密码:</label>
                    <input type="password" id="loginPassword" value="admin123" placeholder="输入密码">
                </div>
                <button onclick="testLogin()">测试登录</button>
                <div id="loginResponse" class="response" style="display:none;"></div>
            </div>
        </div>

        <div class="api-section">
            <h2>用户注册测试</h2>
            <div class="endpoint">
                <span class="method post">POST</span>
                <span class="url">/users</span>
            </div>
            <div class="test-form">
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" id="regUsername" placeholder="新用户名">
                </div>
                <div class="form-group">
                    <label>邮箱:</label>
                    <input type="email" id="regEmail" placeholder="邮箱地址">
                </div>
                <div class="form-group">
                    <label>密码:</label>
                    <input type="password" id="regPassword" placeholder="密码">
                </div>
                <div class="form-group">
                    <label>姓名:</label>
                    <input type="text" id="regFirstName" placeholder="名">
                </div>
                <div class="form-group">
                    <label>姓氏:</label>
                    <input type="text" id="regLastName" placeholder="姓">
                </div>
                <button onclick="testRegister()">测试注册</button>
                <div id="registerResponse" class="response" style="display:none;"></div>
            </div>
        </div>

        <div class="api-section">
            <h2>获取所有用户</h2>
            <div class="endpoint">
                <span class="method get">GET</span>
                <span class="url">/users</span>
            </div>
            <div class="test-form">
                <button onclick="getAllUsers()">获取所有用户</button>
                <div id="usersResponse" class="response" style="display:none;"></div>
            </div>
        </div>

        <div class="api-section">
            <h2>获取作业列表</h2>
            <div class="endpoint">
                <span class="method get">GET</span>
                <span class="url">/assignments</span>
            </div>
            <div class="test-form">
                <button onclick="getAssignments()">获取作业列表</button>
                <div id="assignmentsResponse" class="response" style="display:none;"></div>
            </div>
        </div>

        <div class="api-section">
            <h2>获取提交记录</h2>
            <div class="endpoint">
                <span class="method get">GET</span>
                <span class="url">/submissions</span>
            </div>
            <div class="test-form">
                <button onclick="getSubmissions()">获取提交记录</button>
                <div id="submissionsResponse" class="response" style="display:none;"></div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:806';

        async function makeRequest(url, options = {}) {
            try {
                const response = await fetch(url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                const data = await response.json();
                return { success: true, data, status: response.status };
            } catch (error) {
                return { success: false, error: error.message };
            }
        }

        function displayResponse(elementId, result) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            
            if (result.success) {
                element.className = 'response success';
                element.textContent = `状态: ${result.status}\n\n${JSON.stringify(result.data, null, 2)}`;
            } else {
                element.className = 'response error';
                element.textContent = `错误: ${result.error}`;
            }
        }

        async function testLogin() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            const url = `${API_BASE}/users?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
            const result = await makeRequest(url);
            displayResponse('loginResponse', result);
        }

        async function testRegister() {
            const username = document.getElementById('regUsername').value;
            const email = document.getElementById('regEmail').value;
            const password = document.getElementById('regPassword').value;
            const firstName = document.getElementById('regFirstName').value;
            const lastName = document.getElementById('regLastName').value;

            if (!username || !email || !password) {
                alert('请填写必要信息');
                return;
            }

            const userData = {
                username,
                email,
                password,
                role: 'student',
                createdAt: new Date().toISOString(),
                updatedAt: new Date().toISOString(),
                profile: {
                    firstName: firstName || 'New',
                    lastName: lastName || 'User',
                    avatar: 'https://via.placeholder.com/150',
                    phone: ''
                }
            };

            const result = await makeRequest(`${API_BASE}/users`, {
                method: 'POST',
                body: JSON.stringify(userData)
            });
            displayResponse('registerResponse', result);
        }

        async function getAllUsers() {
            const result = await makeRequest(`${API_BASE}/users`);
            displayResponse('usersResponse', result);
        }

        async function getAssignments() {
            const result = await makeRequest(`${API_BASE}/assignments`);
            displayResponse('assignmentsResponse', result);
        }

        async function getSubmissions() {
            const result = await makeRequest(`${API_BASE}/submissions`);
            displayResponse('submissionsResponse', result);
        }

        // 页面加载时自动获取用户列表
        window.onload = function() {
            getAllUsers();
        };
    </script>
</body>
</html>